<template>
  <view class="container">
    <!-- 顶部工具栏 -->
    <view class="header">
      <view 
        class="header-item" 
        v-for="item in headerItems" 
        :key="item.text"
        @click="handleHeaderClick(item.action)"
      >
        <image :src="item.icon"></image>
        <view>{{item.text}}</view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main" @click="toggleControls">
      <image 
        :src="src" 
        mode="widthFix" 
        @load="onImageLoad"
        @error="onImageError"
      ></image>
    </view>

    <!-- 底部工具栏 -->
    <view class="bottom" v-if="showControls">
      <view 
        class="bottom-item" 
        v-for="item in bottomItems" 
        :key="item.text"
        @click="handleBottomClick(item.action)"
      >
        <uni-icons :type="item.icon" size="24"></uni-icons>
        <view>{{item.text}}</view>
      </view>
    </view>

    <!-- 阅读时长提示 -->
    <view class="reading-time" v-if="showReadingTime">
      已阅读 {{formatTime(readDuration)}}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: "",
      showControls: true,
      showReadingTime: false,
      readDuration: 0, // 阅读时长（秒）
      timer: null,
      lastActiveTime: Date.now(),
      headerItems: [
        { text: "画笔", icon: "/static/icon/pencil.png", action: "pen" },
        { text: "书签", icon: "/static/icon/shuqian.png", action: "bookmark" },
        { text: "切屏", icon: "/static/icon/qieping.png", action: "screenshot" }
      ],
      bottomItems: [
        { text: "目录", icon: "list", action: "toc" },
        { text: "评论", icon: "chat", action: "comment" }
      ]
    };
  },
  onLoad(options) {
    const params = JSON.parse(decodeURIComponent(options.data));
    this.src = params.src;
    uni.setNavigationBarTitle({
      title: params.title
    });
    
    // 初始化阅读计时
    this.startReadingTimer();
  },
  onShow() {
    // 恢复计时
    this.lastActiveTime = Date.now();
    this.startReadingTimer();
  },
  onHide() {
    // 暂停计时
    this.stopReadingTimer();
  },
  onUnload() {
    // 页面卸载时保存阅读时长
    this.stopReadingTimer();
    this.saveReadingDuration();
  },
  methods: {
    startReadingTimer() {
      if (this.timer) return;
      
      this.timer = setInterval(() => {
        const now = Date.now();
        const duration = Math.floor((now - this.lastActiveTime) / 1000);
        this.readDuration += duration;
        this.lastActiveTime = now;
        
        // 每15分钟显示一次阅读时长（5秒后自动隐藏）
        if (this.readDuration > 0 && this.readDuration % (15 * 60) === 0) {
          this.showReadingTime = true;
          setTimeout(() => {
            this.showReadingTime = false;
          }, 5000);
        }
      }, 1000);
    },
    
    stopReadingTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    
    saveReadingDuration() {
      // 这里可以添加保存阅读时长的逻辑
      console.log(`阅读时长：${this.formatTime(this.readDuration)}`);
      // 示例：调用API保存阅读时长
      // uni.request({
      //   url: '/api/saveReadingDuration',
      //   method: 'POST',
      //   data: {
      //     duration: this.readDuration,
      //     bookId: this.bookId
      //   }
      // });
    },
    
    formatTime(seconds) {
      const hours = Math.floor(seconds / 3600);
      const mins = Math.floor((seconds % 3600) / 60);
      const secs = seconds % 60;
      
      if (hours > 0) {
        return `${hours}小时${mins}分钟`;
      } else if (mins > 0) {
        return `${mins}分钟${secs}秒`;
      } else {
        return `${secs}秒`;
      }
    },
    
    toggleControls() {
      this.showControls = !this.showControls;
    },
    
    handleHeaderClick(action) {
      switch(action) {
        case 'pen':
          this.openPenTool();
          break;
        case 'bookmark':
          this.addBookmark();
          break;
        case 'screenshot':
          this.takeScreenshot();
          break;
      }
    },
    
    handleBottomClick(action) {
      switch(action) {
        case 'toc':
          this.showTOC();
          break;
        case 'comment':
          this.showComments();
          break;
      }
    },
    
    openPenTool() {
      uni.showToast({
        title: '画笔功能',
        icon: 'none'
      });
    },
    
    addBookmark() {
      uni.showToast({
        title: '已添加书签',
        icon: 'success'
      });
    },
    
    takeScreenshot() {
      uni.showToast({
        title: '截图已保存',
        icon: 'success'
      });
    },
    
    showTOC() {
      uni.navigateTo({
        url: '/pages/table-of-contents'
      });
    },
    
    showComments() {
      uni.navigateTo({
        url: '/pages/comments'
      });
    },
    
    onImageLoad() {
      console.log('图片加载完成');
    },
    
    onImageError() {
      uni.showToast({
        title: '图片加载失败',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 120rpx;  /* 保持顶部工具栏高度 */
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 0 20rpx;
  
  &-item {
    padding: 10rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 28rpx;
    color: #333;
    transition: all 0.2s;
    
    &:active {
      background-color: rgba(0, 0, 0, 0.05);
    }
    
    image {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 8rpx;
    }
  }
}

.main {
  flex: 1;
  padding-top: 120rpx; /* 保持顶部间距 */
  padding-bottom: 100rpx; /* 减小底部间距 */
  overflow-y: auto;
  
  image {
    width: 100%;
    height: auto;
    display: block;
  }
}

.bottom {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100rpx; /* 减小底部工具栏高度 */
  background-color: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 10rpx 0; /* 减小内边距 */
  
  &-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 26rpx; /* 稍减小字体 */
    color: #333;
    transition: all 0.2s;
    
    &:active {
      background-color: rgba(0, 0, 0, 0.05);
    }
    
    .uni-icons {
      margin-bottom: 6rpx; /* 减小图标间距 */
    }
  }
}

.reading-time {
  position: fixed;
  bottom: 120rpx; /* 调整位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 12rpx 36rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
</style>